最近公司要制作个文档库，直接就可以将应用到实际中。

模版使用了，这么模版相对内部简单一点，学习成本不会很大，而复杂的就当作参考。

模版使用的CSS是版本的。为了省时点，我就直接将Bootstrap官网中的CSS和JS拉了下来。

一、全局配置

在文件中可以有多种设置，包括全局配置、编译选项等。

#网站根目录baseurl: /docs# 生成的文件路径destination: ../../dist/docs# 分页permalink: /:year/:month/:day/:title.htmlpaginate: 1paginate_path: "article/:num"# 转换markdown: kramdownhighlighter: rougeexcerpt_separator: 
     gems: ['jekyll-paginate']exclude: ['open.bat','Gemfile','Gemfile.lock','Guardfile', 'gulpfile.js']# Collectionscollections: common:  output: true  permalink: /:collection/:title ui:  output: true  permalink: /:collection/:title

1）你网站可能会放在域名的某个文件夹下面，那么根目录就要带着那个文件夹，有了“baseurl”的配置，就能方便拼接了。

2）生成的文件路径“destination”，默认是在_site文件夹中，现在放到了我自定义的文件夹下面。

3）分页中为了方便演示，每页仅显示1条记录，文章保存方式是年月日+标题，分页的目录会在“article”，分页比较特殊，下面会详解。

4）markdown就是文章编辑语言，使用了，kramdown是markdown的超级。highlighter就是代码高亮的方式，使用了。

5）excerpt_separator与文章摘要相关，后面也会详解。

6）就是定义一种新的文档类型，例如上面定义了“common”，那么在最终生成的文件中，会专门有一个文件夹，这个后面也会说明下。

二、集合（Collections）

1）与文章的区别

在结构中有一个文件夹，这个文件夹内放的就是文章列表，文件名就是按年月日+标题的方式起的，最终生成的将是年月日的文件夹。

如果把所有各种类型的文章都放在这个里面，管理会比较混乱，例如我有随笔、UI库、工具库等要放在网站展示。

随笔的话就可以都放在_post文件夹里，但是UI库等其他类型的文章展示的格式与其不一样、展示的方式也与其不一样。

下图是一张UI库的页面，左边放的是分类，右边放的内容。如果单独放在文件夹中，那么就可以很方便的编辑分类链接。

2）_data

在上图的右边，还有个页面内容导航，顺便说明下：

kramdown会给h1等自动加上ID，上图中的“h1-h6”就被自动加了ID，里面有英文就用此英文，如果没有就自动生成。

原先我是将这些内容放在_include文件夹下面，_include内放的都是些页面通用部分，后面发现页面越来越多，但是内容都差不多，仅仅是数据不一样，每次都是在复制黏贴。

后面发现jekyll提供了个，可以将数据放入此处，再用for循环来输出，此文件夹内可以使用 .yml、.yaml、.json、csv 扩展名。

- id: "const"  name: "普通常量"  children:   - id: "cookie"     name: "cookie"   - id: "menu"     name: "menu"   - id: "to"     name: "分享回调中设置的TO"   - id: "jsbridge"     name: "JSBridge"

在sidenav.html中输出：


         
      
               {% for data in site.data[page.sidebar][page.sidenav] %}        {% if forloop.first %}        
                   {% else %}        
                   {% endif %}            {
   { data.name }}            {% if data.children %}            
        
                         {% for sub in data.children %}                
         { { sub.name }}
                {% endfor %}            
        
            {% endif %}        
        {% endfor %}    
      
    
      返回顶部

jekyll用的是模版引擎，有自己的语法，基本常规的都有。

三、文章

1）分类

现在的文章都会有分类，做了区分后，文章能更有调理，下图是博客园的自定义文章分类。

jekyll的文章中要做分类，可以在中设置category或categories。

---layout: article-detailtitle: demodate: 2016-05-09 08:25:06sidebar: articlecategory: toolauthor: strick---

在上图中会显示这个分类的名字，并且会输出这个分类下面文章的个数，点击这个分类名，能够跳转到相应的分类下的文章列表。

要实现这几个功能，可以通过categories的相关属性获取。

随笔分类
{% for category in site.categories %}
         
      {
   {category.first}}（{
   {category.last.size}}）
     
{% endfor %}

2）文章列表

上面的分类文章列表中，会多个判断：

{% for category in site.categories %}    {% if category.first == page.category %}        {% for post in category.last %}
         
              
       {
   { post.title }} {
   { post.date | date: "（%Y年%m月%d日）" }}
        
       
        {
   { post.excerpt | strip_html }}
       
    
      
     
        {% endfor %}    {% endif %}{% endfor %}

“{

{ post.excerpt | strip_html }}”就是在做，strip_html是将HTML标签去除。

“{

{ post.date | date: "（%Y年%m月%d日）" }}”是在做格式化时间，上面的头信息中设置了“date: 2016-05-09 08:25:06”。

3）分页

jekyll的分页只能在index.html中执行，只能这个文件，其他文件是不能执行，“”对象中的属性都将为空。

在上面的_config.yml中设置了两个关于分页的属性，一个是每页显示的数量，一个是分页文件输出的方式。

paginate: 1paginate_path: "article/:num"

没有把页码1给输出，我在做分页的时候，就每次都得多做个判断。

页面的样式就直接用了。


             
                                  首页                    
        
              {% if paginator.page == 1 %}            «        {% else %}            {% if paginator.previous_page == 1 %}                        {% else %}                        {% endif %}                «                    {% endif %}        
        {% for i in (1..paginator.total_pages) limit:9 offset:{
    {paginator.page-1}} %}            {% if paginator.page == i %}        
                  {% else %}        
                  {% endif %}            {% if i == 1 %}            {
   {i}}            {% else %}            {
   {i}}            {% endif %}        
        {% endfor %}        
                  {% if paginator.page == paginator.total_pages %}            »            {% else %}                            »                        {% endif %}        
        
                                  末页                    
        
                  第{
   {paginator.page}}页 / 共{
   {paginator.total_pages}}页

demo下载：

参考资料：

本文转自咖啡机（K.F.J）博客园博客，原文链接：http://www.cnblogs.com/strick/p/5484779.html，如需转载请自行联系原作者

一、全局配置

二、集合（Collections）

基础样式

三、文章

随笔分类

{ { post.title }} { { post.date | date: "（%Y年%m月%d日）" }}

{
{ post.title }} {
{ post.date | date: "（%Y年%m月%d日）" }}